<template>
  <div class="home_box2">
    <h3>推荐专题</h3>
    <van-swipe :loop="false" :width="150" :height="100" :show-indicators="false">
      <van-swipe-item v-for="v in getData2" >
        <h4>{{v.title}}</h4>
        <p>{{v.themeDescribe}}</p>
        <!-- <div v-for="c in color">
          <div :style="{background:c}" class="coc"></div>
        </div> -->
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      getData2: [],
      color: ["#ff406c", "#ffc11b", "#00cb47", "#c86efd", "#3ba9ff", "#ff406c"],
    };
  },
  mounted() {
    //   var getData2=this.getData2;
    axios
      .get(
        "/api/solutionSubject/theme.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40&solutionSubjectId=1&pageNum=1&pageSize=6&templatePageSize=6&type=3&device=2"
      )
      .then((res) => {
        this.getData2 = res.data.body.data.themes;
      })
      // .then(function (res) {
      //     getData2=res.data.body.data.themes;
      //     console.log(getData2)
      // })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<style>
.home_box2 {
  width: 100vw;
  height: 20vh;
  margin-top: 5px;
  background: #fff;
  /* background: blue; */
}
.home_box2 > h3 {
  height: 6vh;
  line-height: 6vh;
  margin-left: 5vw;
  /* margin-top: 3vh; */
}
.van-swipe {
  width: 100vw;
}
.van-swipe-item {
  height: 4rem;
  border: 1px solid black;
  margin: 3vh 0vh;

}
.van-swipe-item h4,
.van-swipe-item p {
  text-align: center;
}
.van-swipe-item h4 {
  margin-top: 1rem;
}
.van-swipe-item p {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
}
</style>